<template>
  <div>
    <!-- 增删改查 -->
    <el-card>
      <!-- 顶部工具栏 -->
      <el-row type="flex">
        <el-col>
          <el-button type="primary" @click="isShowDialog = true">添加客户</el-button>
        </el-col>
        <el-col>
          <el-row type="flex">
            <el-select v-model="agentSelect" />
            <el-input v-model="nameInput" />
            <el-button @click="submitSearch">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider />
      <!-- 表格 -->
      <el-table border :data="clientList">
        <el-table-column width="200" prop="image" label="图片">
          <template v-slot="{row}">
            <img class="tableImg" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="agent.name" label="经纪" />
        <el-table-column prop="wechat" label="微信" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分割线 -->
      <el-divider />
      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="pageConfig._limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog title="添加客户" :visible="isShowDialog" @close="cancelForm">
      <el-form label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="formData.wechat" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.desc" />
        </el-form-item>
        <el-form-item label="经纪人">
          <el-select v-model="formData.agent">
            <el-option
              v-for="item in agentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="formData.image" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="mini" type="primary" @click="confirmForm">确定</el-button>
        <el-button size="mini" @click="cancelForm">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getClientList, addClient, getClientNumber } from '@/api/client'
import { getAgentList } from '@/api/agent'
export default {
  data() {
    return {
      // 分页参数
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      // 前端概念当中的页码
      page: 1,
      total: 0,

      // 筛选相关
      nameInput: '',

      isShowDialog: false,
      clientList: [],
      agentList: [],
      agentSelect: '',
      formData: {
        'agent': '', // 属于哪个经纪的 id 值
        'name': '',
        'email': '',
        'phone': '',
        'wechat': '',
        'desc': '',
        'image': 'https://img1.baidu.com/it/u=2793293935,491721777&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
      }
    }
  },
  async created() {
    this.getClientList()
    this.getClientNumber()
    this.getAgentList()
  },
  methods: {
    submitSearch() {
      // 发请求拿数据
      // 发请求拿数据
      // 还得关注分页功能
      // 获取数据
      this.getClientList()
      // 获取数量
      this.getClientNumber()
    },
    currentChange(newPage) {
      this.page = newPage
      // 当前下标等于上一页最后下标的后一个, 把页码减一, 乘以每页条数即可
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      this.getClientList()
    },
    async getClientList() {
      const { data } = await getClientList({
        ...this.pageConfig,
        // 获取数据还要带上用户的搜索条件
        name_contains: this.nameInput || null
      })
      this.clientList = data
      console.log('客户', data)
    },
    async getClientNumber() {
      const { data } = await getClientNumber({
        name_contains: this.nameInput || null
      })
      this.total = data
    },
    async getAgentList() {
      const { data } = await getAgentList()
      this.agentList = data
      console.log('经纪', data)
    },
    async confirmForm() {
      // 这里省略了校验表单
      // 发请求
      await addClient(this.formData)
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.isShowDialog = false
      // 更新页面
      this.getClientList()
    },
    cancelForm() {
      this.formData = {
        'agent': '', // 属于哪个经纪的 id 值
        'name': '',
        'email': '',
        'phone': '',
        'wechat': '',
        'desc': '',
        'image': 'https://img1.baidu.com/it/u=2793293935,491721777&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
      }
      this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tableImg {
  width: 178px;
  height: 120px;
  // 图片写死宽高的情况, 控制拉伸效果的样式
  object-fit: contain;
  // object-fit: cover;
}
</style>
